<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>范闲商城-首页</title>
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/reset.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/main.css}">
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
	<script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/mylayer.js}" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="../static/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="../static/js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="../static/js/slide.js"></script>
	<style>
		html, body {
			height: 100%;
			margin: 0;
		}

		body {
			display: flex;
			flex-direction: column;
			min-height: 100vh;
		}

		.content {
			flex: 1;
		}
		/* 基础样式 */
		.submenu {
			display: none; /* 默认不显示，通过JS控制显示 */
			position: absolute;
			left: 23.55%; /* 保证子菜单与父级对齐 */
			top: 26.7%;
			width: 200px; /* 设置一个固定宽度 */
			background-color: #f9f9f9;
			border: 1px solid #ccc;
			box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); /* 添加阴影效果 */
			z-index: 1000;
		}

		.subnav li:hover .submenu {
			display: block; /* 鼠标悬停时显示子菜单 */
		}

		.submenu li {
			display: block;
			clear: both;
		}

		.submenu li a {
			color: black;
			padding: 12px 16px; /* 增加填充使链接更易点击 */
			text-decoration: none;
			display: block;
			white-space: nowrap; /* 防止文本换行 */
		}

		.submenu li a:hover {
			background-color: #ddd; /* 鼠标悬停时的背景颜色 */
		}

		/* 图片与文本的布局 */
		.submenu li a img {
			vertical-align: middle; /* 垂直对齐 */
			margin-right: 10px; /* 图片和文本之间的间距 */
		}
		.avatar-img {
			width: 20px; /* 设置头像图片的宽度 */
			height: 20px; /* 设置头像图片的高度，可以根据需要调整 */
			border-radius: 50%; /* 使图片呈现圆形 */
			margin-right: 10px; /* 设置头像图片与用户名之间的间距，可以根据需要调整 */
		}
	</style>
</head>
<body>
	<div class="content">
		<!-- 所有内容除了footer -->
<!--		<div class="header_con">-->
<!--			<div class="header">-->
<!--				<div class="welcome fl">欢迎来到范闲商城!</div>-->
<!--				<div class="fr" id="IFLogin">-->


<!--				</div>-->
<!--			</div>-->
<!--		</div>-->
		<div th:replace="header::top"></div>

		<div class="search_bar clearfix">
			<a href="/" class="logo fl"><img src="../static/pic/fanxian-mall.png" width="150px" height="60px"></a>
			<div class="search_con fl">
				<input type="text" id="searchInput" class="input_text fl" placeholder="搜索商品">
				<input type="button" id="searchButton" class="input_btn fr" value="搜索">
			</div>
			<div class="guest_cart fr">
				<a href="/page/cart" id="cart" class="cart_name fl">我的购物车</a>
			</div>
		</div>

		<div class="navbar_con">
			<div class="navbar">
				<h1 class="fl">全部商品分类</h1>
				<ul class="navlist fl">
					<li><a href="/">首页</a></li>
					<li class="interval">|</li>
					<li><a href="/page/list">全部商品</a></li>
					<li class="interval">|</li>
					<li><a href="/page/turntable">抽奖</a></li>
				</ul>
			</div>
		</div>

		<div class="center_con clearfix">
			<ul class="subnav fl" id="categoryList">
			</ul>
			<div class="slide fl">
				<ul class="slide_pics" id="carousel">
<!--					<li><img src="../static/images/slide.jpg" alt="幻灯片"></li>-->
<!--					<li><img src="../static/images/slide02.jpg" alt="幻灯片"></li>-->
<!--					<li><img src="../static/images/slide03.jpg" alt="幻灯片"></li>-->
<!--					<li><img src="../static/images/slide04.jpg" alt="幻灯片"></li>-->
				</ul>
				<div class="prev"></div>
				<div class="next"></div>
				<ul class="points"></ul>
			</div>
			<div class="adv fl">
				<a href="#"><img src="../static/images/adv01.jpg"></a>
				<a href="#"><img src="../static/images/adv02.jpg"></a>
			</div>
		</div>
		<div class="list_model">
			<div class="list_title clearfix">
				<h3 class="fl" id="">智能推荐</h3>
			</div>

			<div class="goods_con clearfix">
				<div class="goods_banner fl"><img src="/static/images/cnxh.jpg"></div>
				<ul class="goods_list fl" id="recommend">
					<li>
						<h4><a href="#">草莓</a></h4>
						<a href="#"><img src="/static/images/goods/goods003.jpg"></a>
						<div class="prize">¥ 30.00</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="list_model" id="LAY_categoryBrandList">

		</div>
	</div>

	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>
		</div>
		<p>CopyRight © 2024 北京鑫鑫科技有限公司 All Rights Reserved</p>
		<p>电话：010-8888888    京ICP备88888888号</p>
	</div>

	<script>
		$('#searchButton').click(function() {
			var searchText = $('#searchInput').val(); // 获取搜索框中的值
			var searchUrl = '/page/list?search=' + encodeURIComponent(searchText); // 构建带有搜索关键字的URL
			window.location.href = searchUrl; // 跳转到另一个页面
		});
		$.post(
				'/user/checkUserLogin',
				function (result) {
					if (result.code == 0) {
						$.post(
								'/order/checkUserOrder',
								function (result) {
									if (result.data == 0) {
										//订单为0
										newProduct();
									} else {
										//智能推荐
										$.post(
												'/product/recommendedProducts',
												function (result) {
													if (result.code == 0) {
														var html = '';
														$('#recommend').empty();
														$(result.data.slice(0, 4)).each(function () {
															html += '<li>'
															html += '	<h4><a href="/page/detail?productId=' + this.id + '&parentId=' + this.parentId + '&categoryId=' + this.categoryId + '">' + this.name + '</a></h4>'
															html += '	<a href="/page/detail?productId=' + this.id + '&parentId=' + this.parentId + '&categoryId=' + this.categoryId + '"><img src="' + this.mainImage + '"></a>'
															html += '	<div class="prize">¥ ' + this.price + '</div>'
															html += '</li>'
														});
														$('#recommend').append(html);
													}
												},
												'json'
										);
									}
								},
								'json'
						);
					} else {
						//没有登录
						newProduct();
					}
				},
				'json'
		);

		function newProduct() {
			$.post(
					'/product/selectList',
					function (result) {
						if (result.code == 0) {
							var html = '';
							$('#recommend').empty();
							$(result.data.slice(-4)).each(function () {
								html += '<li>'
								html += '	<h4><a href="/page/detail?productId=' + this.id + '&parentId=' + this.parentId + '&categoryId=' + this.categoryId + '">' + this.name + '</a></h4>'
								html += '	<a href="/page/detail?productId=' + this.id + '&parentId=' + this.parentId + '&categoryId=' + this.categoryId + '"><img src="' + this.mainImage + '"></a>'
								html += '	<div class="prize">¥ ' + this.price + '</div>'
								html += '</li>'
							});
							$('#recommend').append(html);
						}
					},
					'json'
			);
		}


		$.post(
				'/category/listAlls',
				function (result) {
					console.log(result);
					if (result.code == 0) {
						$(result.data).each(function () {
							var html = '';
							html+='<li class="category-list">'
							html+='    <a href="#model'+this.id+'">'
							html+='        '+this.name+''
							html+='    </a>'
							html+='    <div class="commodity clearfix comm-3 sub_categories">'
							html+='        <ul class="submenu">'
							$(this.childList).each(function () {
								html+='            <li class="com-li">'
								html+='                <a href="/page/list?categoryId='+this.id+'&parentId='+this.parentId+'" class="link clearfix">'
								html+='                    <img src="'+this.mainImage+'" alt="" width="40" height="40">'
								html+='                        <span class="text">'+this.name+'</span>'
								html+='                </a>'
								html+='            </li>'
							})
							html+='        </ul>'
							html+='    </div>'
							html+='</li>'

							$('#categoryList').append(html);

							// 全部商品分类
							var category_list = document.querySelectorAll(".category-list"),
									commodity = document.querySelectorAll(".commodity");
							for (var i = 0; i < category_list.length; i++) {
								category_list[i].index = i;
								category_list[i].onmouseover = function() {
									for (var i = 0; i < commodity.length; i++) {
										commodity[i].style.display = "none";
									}
									commodity[this.index].style.display = "block";
									category_list[this.index].classList.add("listBcolor");

								}
								category_list[i].onmouseout = function() {
									category_list[this.index].classList.remove("listBcolor");
									commodity[this.index].style.display = "none";
								}
							}
						});
					}

				},
				'json'
		)
		$.post(
				'/category/listAll',
				function (result) {
					if (result.code == 0) {
						$('#LAY_categoryBrandList').empty();
						$(result.data).each(function (index, category) {
							var html = '';
							html += '<div class="list_title clearfix">';
							html += ' <h3 class="fl" id="model' + category.id + '">' + category.name + '</h3>';
							html += ' <a href="page/list?parentId=' + category.id + '" class="goods_more fr" id="fruit_more">查看更多 ></a>';
							html += '</div>';

							html += '<div class="goods_con clearfix">';
							html += '    <div class="goods_banner fl"><img src="' + category.image + '"></div>';
							html += '    <ul class="goods_list fl" id="LAY_CategoryList' + category.id + '">';
							html += '    </ul>';
							html += '</div>';
							$('#LAY_categoryBrandList').append(html);

							$.post(
									'/product/productByPatientId',
									{ 'parentId': category.id },
									function (result) {
										if (result.code == 0) {
											var html = '';
											$(result.data.slice(0, 4)).each(function () {
												html += '<li>';
												html += '   <h4><a href="page/detail?parentId=' + category.id + '&categoryId='+this.categoryId+'&productId='+this.id+'">' + this.name + '</a></h4>';
												html += '   <a href="page/detail?parentId=' + category.id + '&categoryId='+this.categoryId+'&productId='+this.id+'"><img src="' + this.mainImage + '"></a>';
												html += '	<div class="prize">¥'+this.price+'</div>'
												html += '</li>';
											});
											$('#LAY_CategoryList' + category.id).html(html);
										}
									},
									'json'
							);
						});
					}
				},
				'json'
		);
		/*$.post(
				'/user/checkUserLoginTop',
				function (result) {
					if (result.code == 0) {
						//代表已经登录，直接插入购物车
						var html = '';
						$('#IFLogin').empty();
						$(result.data).each(function () {
							html += '<div class="user_link fl">'
							html += '	<a href="javascript:;">'
							html += '		欢迎您：<input type = "hidden" id="userId" value="'+this.id+'">'
							html += '		<img class="avatar-img" src="'+this.image+'"/>'
							html += '		<span>'+this.name+'</span>'
							html += '	</a>'
							html += '	<span>|</span>'
							html += '	<a href="/page/user/info">用户中心</a>'
							html += '	<span>|</span>'
							html += '	<a href="/page/cart">我的购物车</a>'
							html += '	<span>|</span>'
							html += '	<a href="/page/user/order">我的订单</a>'
							html += '	<span>|</span>'
							html += '	<a href="javascript:logout()">注销</a>'
							html += '</div>'
						});
						$('#IFLogin').append(html);
					} else {
						var html = '';
						$('#IFLogin').empty();
						html += '<div class="login_btn fl">'
						html += '	<a href="/page/login">登录</a>'
						html += '	<span>|</span>'
						html += '	<a href="/page/register">注册</a>'
						html += '</div>'

						$('#IFLogin').append(html);

					}
				},
				'json'
		);
		/*$('#cart').click(function () {
			//加入购物车之前首先判断有没有登录
			//如果没有登录首先完成登录
			//如果已经登录，就将商品信息插入到cart购物车表里面，然后跳转到购物车列表界面
			$.post(
					'/user/checkUserLogin',
					function (result) {
						if (result.code == 0) {
							//代表已经登录，直接进入购物车
							location.href = '/page/cart';
						} else {
							//没有登录，弹出登录界面
							location.href = '/page/login';
						}
					},
					'json'
			);
		});*/
		function logout() {
			layer.confirm(
					'您确认要退出么',
					{icon:3},
					function() {
						$.post(
								'/user/logout',
								function (result) {
									if (result.code == 0) {
										mylayer.okMsg(result.msg);
										setTimeout(function() {
											window.location.reload();
										}, 800);
									}
								},
								'json'
						);
						// location.href = '/admin?method=logout'
					}
			);
		}
	</script>
</body>
</html>